import "./index.scss"
import UserAddIcon from "@src/assets/user-add.svg?react"
import UserNoteIcon from "@src/assets/user-note.svg?react"
import MoreIcon from "@src/assets/more.svg?react"
import {useLocation, useNavigate} from "react-router-dom";
import {getUserInfo} from "@src/utils/userInfo"
import {newsDataCreate} from "@src/store/newsData"
import FocusIcon from "@src/assets/focus.svg?react"
const pathnameList = ["/home/news", "/home/chatRoom", "/home/music"]
export default function LayoutHeader() {
    const {user} = getUserInfo();
    const navigate = useNavigate();
    const location = useLocation();
    const {newFriendRequestLength} = newsDataCreate()
    return (
        <header id="header"
                style={{animationName: pathnameList.includes(location.pathname) ? "header-slideUp" : "header-slideDown"}}>
            <div>
                <div className="user centered" onClick={() => {
                    if (!user.isVisitor) {
                        navigate("/userinfo")
                    }
                }}>
                    <img className="userHead" src={user.avatar} alt=""/>
                    <p>{user.name}</p>
                </div>

                <div className="MoreIcon-box centered">
                    <MoreIcon></MoreIcon>
                    {newFriendRequestLength !== 0 && <div className="z-badge">{newFriendRequestLength}</div>}

                    <ul className="MoreIcon-box-ul">
                        {!user.isVisitor && <>
                            <li className="centered" onClick={() => navigate("/home/news/addFriends")}>
                                <UserNoteIcon></UserNoteIcon>
                                <span>好友申请</span>
                                {newFriendRequestLength !== 0 &&
                                    <div className="z-badge">{newFriendRequestLength}</div>}
                            </li>
                            <li className="centered" onClick={() => navigate("/home/news/searchUser")}>
                                <UserAddIcon></UserAddIcon>
                                <span>加好友</span>
                            </li>
                        </>}
                        <li className="centered" onClick={() => navigate("/introduce")}>
                            <FocusIcon></FocusIcon>
                            <span>关于本站</span>
                        </li>
                    </ul>
                </div>

            </div>
        </header>
    )
}